<!--
 * @Description: 
 * @Author: 阳婷
 * @Date: 2021-03-19 11:15:53
 * @LastEditTime: 2023-05-15 15:25:37
 * @LastEditors: 阳婷
-->
<template>
    <div class="tabPane">
        <el-form ref="form" :rules="rules" :model="form" label-width="140px">
            <el-form-item label="角色名称" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="角色描述">
                <el-input type="textarea" v-model="form.display_name"></el-input>
            </el-form-item>
        </el-form>
    </div>
    <div class="footerBtn">
        <el-button @click="onSubmit" type="primary" size="small">保存</el-button>
    </div>
</template>
<script>
    import {
        deepCopy,
        isEmptyObject
    } from "@/utils/index"
    export default {
        props: ["rowData"],
        data() {
            return {
                rules: {
                    name: [{
                        required: true,
                        message: "请输入角色名称",
                        trigger: "blur"
                    }]
                },
                form: {
                    id: '',
                    name: '',
                    display_name: ''
                }
            }
        },
        watch: {
            rowData() {
                this.clearData();
                if (!isEmptyObject(this.rowData)) {
                    this.form = deepCopy(this.rowData.role);
                }
            }
        },
        mounted() {
            this.clearData();
            if (!isEmptyObject(this.rowData)) {
                this.form = deepCopy(this.rowData.role);
            }
        },
        methods: {
            onSubmit() {
                if (this.form.name !== "") {
                    if (this.form.id) {
                        this.update()
                    } else {
                        this.add()
                    }
                } else {
                    this.$message({
                        type: "warning",
                        message: "角色名称必须填写"
                    })
                }
            },
            add() {
                this.$ajax("post", "/api/roles", this.form, data => {
                    if (data.code == 200) {
                        this.clearData();
                        this.$parent.$parent.$parent.$parent.show = false
                        this.$parent.$parent.$parent.$parent.getData()
                    }
                    this.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            },
            update() {
                this.$ajax("put", "/api/roles/update/"+ this.form.id, this.form, data => {
                    if (data.code == 200) {
                        this.clearData()
                        this.$parent.$parent.$parent.$parent.$parent.$parent.show = false
                        this.$parent.$parent.$parent.$parent.$parent.$parent.getData()
                    }
                    this.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            },
            clearData() {
                this.form = {
                    id: '',
                    name: '',
                    display_name: ''
                }
            }
        }
    }
</script>
<style scoped>
    .tabPane {
        padding: 5px 15px 15px 15px;
    }
</style>